<ng-container
  *ngIf="
    !(isLoading$ | async) && (locations$ | async) as locations;
    else loading
  "
>
  <div class="cx-store-finder-list-count container">
    <div
      *ngFor="let country of locations?.countriesAndRegionsStoreCount"
      class="cx-store-finder-list-count__country-set; else loading"
    >
      <a
        [routerLink]="
          {
            route: [
              'storeFinder',
              { name: 'listStores', params: { country: country.isoCode } }
            ]
          } | cxTranslateUrl
        "
        class="btn-link"
      >
        <div class="cx-store-finder-list-count__country-title">
          <span
            [ngClass]="
              country?.storeCountDataList
                ? 'country-header'
                : 'country-header-link'
            "
            class="cx-store-finder-list-count__country-name"
            >{{ country.name }}</span
          >
          <span
            [ngClass]="
              country?.storeCountDataList
                ? 'country-header'
                : 'country-header-link'
            "
            *ngIf="!country?.storeCountDataList"
            class="cx-store-finder-list-count__country-count"
            >({{ country.count }})</span
          >
        </div>
      </a>
      <div class="cx-store-finder-list-count__region-set">
        <ul class="cx-store-finder-list-count__region-directory">
          <li
            *ngFor="let region of country?.storeCountDataList"
            class="cx-store-finder-list-count__directory-item"
          >
            <a
              [routerLink]="
                {
                  route: [
                    'storeFinder',
                    {
                      name: 'listStores',
                      params: {
                        country: country.isoCode,
                        region: region.isoCode
                      }
                    }
                  ]
                } | cxTranslateUrl
              "
              class="btn-link cx-store-finder-list-count__item-link"
            >
              {{ region.name }}</a
            >
            <span class="cx-store-finder-list-count__item-count"
              >({{ region.count }})</span
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</ng-container>
<ng-template #loading>
  <div class="cx-store-finder-count__spinner"><cx-spinner></cx-spinner></div>
</ng-template>
